/**
 * @author      OA Wu <comdan66@gmail.com>
 * @copyright   Copyright (c) 2015 OA Wu Design
 */

@import "_oa";

@include font-face("Monaco", font-files("monaco/monaco.ttf", "monaco/monaco.otf"));

* {
  &, &:after, &:before {
    vertical-align: top;
    font-size: medium;
    font-family: Monaco, Gafata, '微軟正黑體';
    @include box-sizing(border-box);
    @include selection(rgba(150, 180, 230, 1.0000), rgba(237, 239, 244, 1.0000));
    @include font-smoothing(antialiased);
  }
}

html {
  height: 100%;

  body {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 0;
    width: 100%;
    height: 100%;
    background: $mainBackgroundColor $mainBackgroundImage;
    color: rgba(50, 50, 50, 0.8);

    @include font-smoothing(antialiased);
    @include box-shadow(none);
  }
}

#container {
  position: relative;
  display: block;
  margin: 0 auto;
  height: 100%;

  .map {
    position: relative;
    height: 100%;
    overflow: hidden;

    #map {
      position: relative;
      height: 100%;
      overflow: hidden;
      background: transparent url() no-repeat center center;
    }
    #throw_dice {
      position: absolute;
      top: 30px;
      left: 10px;
      @include button('pink');
      font-size: 20px;
      width: 100px;
    }
    #about {
      position: absolute;
      top: 30px;
      right: 90px;
      @include button();
      font-size: 20px;
    }
    #more {
      position: absolute;
      top: 30px;
      right: 10px;
      @include button('green');
      font-size: 20px;
    }
    #quota1, #quota2 {
      position: absolute;
      right: 10px;

      bottom: 140px;

      padding: 10px;
      font-weight: bold;
      color: rgba(39, 40, 34, 1);
      border: 1px solid rgba(39, 40, 34, .4);
      background-color: rgba(0, 0, 255, 0.3);

      @include border-radius(2px);
      @include transition(all .3s);
      @include box-shadow(0 0 15px 1px rgba(0, 0, 0, 0.2));

      > span {
        margin: 0 5px;
      }
    }
    #quota2 {
      right: auto;
      left: 10px;
      background-color: rgba(0, 128, 0, 0.4);
    }
    i {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 999;
      @include box-shadow(0 0 15px 1px rgba(0, 0, 0, 0.5));

      &:nth-child(1) { border: 1px solid rgba(255, 255, 255, .5); top: -5px; left: 0; height: 5px; }
      &:nth-child(2) { top: 0; right: -4px; width: 5px; border: 1px solid rgba(255, 255, 255, .9); @include box-shadow(0 0 10px rgba(0, 0, 0, 0.2)); }
      &:nth-child(3) { bottom: -4px; left: 0; height: 5px; border: 1px solid rgba(255, 255, 255, .9); @include box-shadow(0 0 10px rgba(0, 0, 0, 0.2)); }
      &:nth-child(4) { border: 1px solid rgba(255, 255, 255, .5); top: 0; left: -5px; width: 5px; }
    }
    #logs {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 130px;
      padding: 15px;
      border-top: 1px solid rgba(39, 40, 34, .5);
      background-color: rgba(255, 255, 255, .95);
      overflow-y: auto;

      @include border-radius(2px);
      @include transition(all .3s);
      @include box-shadow(inset 0 1px 5px rgba(0, 0, 0, 0.2));

      text-align: center;

      > div {
        margin: 0 auto;
        text-align: left;
        @include overflow-docx3();

        &.title {
          font-size: 16px;
          font-weight: bold;
          border-bottom: 1px solid rgba(39, 40, 34, .2);
          margin-bottom: 5px;
          padding-bottom: 5px;

        }
        &.log {
          padding: 0 20px;
          @include split-right(65px);

          .l, .r {
            @include overflow-docx3();
          }
          .r {
            text-align: right;
            font-size: 13px;
          }
          + .log {
            margin-top: 5px;
          }
          + .title {
            margin-top: 10px;
          }
        }
      }
    }
  }
}

.info_bubble {
  position: relative;
  width: 260px;
  overflow: hidden;
  text-align: left;
  font-size: 16px;
  color: rgba(50, 50, 50, 0.7);
  min-height: 150px;

  .img {
    position: relative;
    display: inline-block;
    width: 100%;
    @media screen and (min-width: 0px) and (max-width: #{$mediaMobileWidth - 1px}) {
      max-height: 150px;
    }
    @media screen and (min-width: #{$mediaMobileWidth}) {
      max-height: 300px;
    }

    overflow: hidden;

    &:hover {
      .title {
        color: rgba(255, 255, 255, 1);
      }
    }
    img {
      width: 100%;
    }
    .title {
      position: absolute;
      bottom: 0;
      left: 0;
      display: inline-block;
      width: 100%;

      padding-left: 5px;
      padding-bottom: 3px;
      padding-top: 5px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: bold;

      background-color: rgba(0, 0, 0, 0);

      @include overflow-docx3();
      @include transition(all .3s);
      @include text-shadow(1px 1px 1px rgba(53, 53, 53, 0.5));
      @include background-image(
                    linear-gradient(
                        rgba(0, 0, 0, 0) 5%,
                        rgba(0, 0, 0, .1) 15%,
                        rgba(0, 0, 0, .9) 100%
                    ));
    }
  }
  .items {
    font-size: 14px;
    padding: 5px 10px;

    .item {
      padding: 0 5px;
      @include overflow-docx3();

      & ~ .item {
        border-top: 1px solid rgba(39, 40, 34, .4);
        margin-top: 2px;
      }
    }
  }
  .bottom {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid rgba(255, 0, 0, .3);
  }
  .delete {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    width: 32px;
    border-left: 1px solid rgba(39, 40, 34, .5);
    border-bottom: 1px solid rgba(39, 40, 34, .5);
    color: rgba(250, 250, 250, 0.7);
    background-color: rgba(39, 40, 34, .2);
    text-align: center;
    cursor: pointer;
    @include transition(all .3s);
    @include border-radius(0 0 0 2px);

    &:hover {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(39, 40, 34, .3);
    }
  }
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  background: $mainBackgroundColor $mainBackgroundImage;
  z-index: 9999999;

  & > div {
    @include loading();
  }
}

#run_dice {
  position: fixed;
  display: inline-block;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39, 40, 34, .7);

  &.hide {
    display: none;
  }
  > div {
    display: inline-block;
    margin: 0 auto;
    @media screen and (min-width: 0px) and (max-width: 559px) {
      margin-top: 100px;
    }
    @media screen and (min-width: 560px) {
      margin-top: 200px;
    }
    width: 200px;
    height: 200px;
    @include perspective(200px);

    #dice {
      position: relative;
      width: 100%;
      height: 100%;
      @include transform-style(preserve-3d);
      @include transition(transform .5s);

      &.show1 { @include transform(translateZ(-100px) rotateY(0deg)); }
      &.show6 { @include transform(translateZ(-100px) rotateX(-180deg)); }
      &.show2 { @include transform(translateZ(-100px) rotateY(-90deg)); }
      &.show5 { @include transform(translateZ(-100px) rotateY(90deg)); }
      &.show3 { @include transform(translateZ(-100px) rotateX(-90deg)); }
      &.show4 { @include transform(translateZ(-100px) rotateX(90deg)); }

      > div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-image: image-url('map/dice-compressor.png', false, false);
        border-radius: 30px;
        border: 1px solid #ccc;
        @include opacity(.75);

        &.front { background-position: -12px -12px; @include transform(rotateY(0deg) translateZ(100px));}
        &.back { background-position: -463px -239px; @include transform(rotateX(180deg) translateZ(100px));}
        &.right { background-position: -236px -12px; @include transform(rotateY(90deg) translateZ(100px));}
        &.left { background-position: -241px -235px; @include transform(rotateY(-90deg) translateZ(100px));}
        &.top { background-position: -459px -12px; @include transform(rotateX(90deg) translateZ(100px));}
        &.bottom { background-position: -12px -235px; @include transform(rotateX(-90deg) translateZ(100px));}
      }
    }
  }
}
